<template>
  <form class="comp-page-search-common"
    name="commonSearchForm"
    @submit="searchOne"
    layout layout-align="start center">

    <!-- 搜索框
    -------------------------- -->
    <div class="comp-page-search-common__border"
      layout layout-align="start center">

      <!-- 搜索选项下拉列表 -->
      <el-dropdown
        v-if="!isSingleSearch"
        placement="bottom-start"
        @command="changeCommonItem">
        <span class="el-dropdown-link">
          <i class="comp-page-search-common__dropdown el-icon-caret-bottom"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, index) in commonSearchList"
            :key="index"
            :command="item"
            :disabled="item.name === nowSearch.name">
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- 当前搜索框 -->
      <span v-if="!isSingleSearch">{{ nowSearch.name + ':' }}</span>

      <!-- 简约搜索
      -------------------------- -->
      <el-input
        flex
        class="comp-page-search-common__input"
        @focus="$emit('focusNameChange', nowSearch.name)"
        @blur="$emit('focusNameChange', '')"
        :ref="nowSearch.name"
        v-if="isSingleSearch"
        v-model="nowSearch.value"
        :placeholder="nowSearch.placeholder"></el-input>

      <!-- 根据不同的type显示不同的输入框 -->
      <!-- 普通输入框 -->
      <el-input
        flex
        class="comp-page-search-common__input"
        @focus="$emit('focusNameChange', nowSearch.name)"
        @blur="$emit('focusNameChange', '')"
        :ref="nowSearch.name"
        v-if="nowSearch.type === 'input'"
        v-model="nowSearch.value"
        :placeholder="nowSearch.placeholder"></el-input>
        
      <!-- 下拉选择框 -->
      <select-form-item
        flex
        class="comp-page-search-common__input"
        v-if="nowSearch.type === 'select'"
        @focusNameChange="v => $emit('focusNameChange', v)"
        @selectChange="searchChange"
        :metaData="nowSearch"></select-form-item>
    </div>

    <!-- 搜索按钮
    -------------------------- -->
    <el-button 
      class="comp-page-search-common__search"
      icon="el-icon-search"
      native-type="submit"></el-button>
  </form>
</template>

<script>
import SelectFormItem from './select.vue'

export default {
  name: 'CompPage-searchSearchCommon',
  components: { SelectFormItem },
  data () {
    return {
      nowSearch: {
        placeholder: '请输入查询内容',
        name: '查询',
        value: ''
      }
    }
  },
  props: {
    commonSearchList: Array, // 控件选择下拉列表
    isSingleSearch: Boolean // 是否为简约搜索（无选择和高级搜索）
  },
  methods: {
    searchOne () {
      this.searchChange(this.nowSearch)
      this.$nextTick(() => {
        this.nowSearch.value = ''
      })
    },
    // 下来列表选择回调-改变普通搜索
    changeCommonItem (v) {
      this.nowSearch = v
      this.$nextTick(() => {
        this.$refs[v.name] && this.$refs[v.name].focus()
      })
    },
    searchChange (data) {
      this.$emit('search', data)
    }
  },
  created () {
    // 将common列表的第一个赋给输入框
    Object.assign(this.nowSearch, this.commonSearchList[0])
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(page-search-common) {
  height: $--page-search-common-height;

  @include e(border) {
    border: 1px solid $--border-color-base;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    color: $--color-text-primary;
    height: 100%;

    @include e(dropdown) {
      color: $--color-text-secondary;
      padding: 0 $--padding-base;
      cursor: pointer;
      &:hover {
        color: $--color-text-primary;
      }
    }
    @include e(input) {
      width: 300px;
      input {
        color: $--color-text-primary;
        font-size: 12px;
        height: 100%;
        border: none;
      }
    }
  }

  @include e(search) {
    height: 100%;
    padding-top: unset;
    padding-bottom: unset;
    line-height: 100%;
    border-left-width: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

}
</style>
